<?
include_once ("libs/common.php");
?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			<?= get_title() ?>
		</title>
		<!-- scrollable styling -->
		<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css" />
		<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css" />
		<!-- overlay styling -->
		<link rel="stylesheet" type="text/css" href="css/overlay-basic.css"/>
		<!-- gallery styling -->
		<link rel="stylesheet" type="text/css" href="css/overlay-gallery.css"/>
		<style type="text/css">
			@import url(css/main.css);
			/* get rid of those system borders being generated for A tags */
			a:active {
				outline: none;
			}:focus {
				-moz-outline-style: none;
			}
			
			/*** override styling in external stylesheets ***/
			/* remove margins from the image */ .items img {
				margin: 0;
			}
			
			/* make A tags our floating scrollable items */ .items a {
				display: block;
				float: left;
				margin: 20px 15px;
			}
			
			/* tooltip styling */ #tooltip {
				display: none;
				background: url(images/black_arrow.png);
				font-size: 12px;
				height: 70px;
				width: 160px;
				padding: 25px;
				color: #fff;
			}
			
			/* scrollable should not disable gallery navigation */ #gallery .disabled {
				visibility: visible !important;
			} #gallery .inactive {
				visibility: hidden !important;
			}
		</style>
		<script src="js/main.js" type="text/javascript">
		</script>
		<script src="js/jquery.tools.min.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
			    /* chained call: scrollable().find("a").tooltip().overlay().gallery(); */
			    
			    $(".scrollable").scrollable().find("a").tooltip({
			    
			        // use this single tooltip element for all trigger elements
			        tip: '#tooltip',
					effect: 'slide'
			    
			    }).overlay({
			    
			        // each trigger uses the same overlay with id "gallery"
			        target: '#gallery',
			        
			        // optional exposing effect with custom color
			        expose: '#111',
			        
			        // clicking outside the overlay does not close it
			        closeOnClick: false
			    
			        // gallery plugin
			    }).gallery({
			    
			        // do not use the same disabled class name as scrollable
			        disabledClass: 'inactive'
			    });
				
				
				// assign a click event to the exposed element, using normal jQuery coding
				$("#profile_pic").click(function() {
					// perform exposing for the clicked element
					$(this).expose({api: true, color: '#3f3f3f', opacity: 0.7}).load();
					
				});
			});
		</script>
	</head>
	<body onload="externalLinks();">
		<div id="head">
			<?include("header.php") ?>
		</div>
		<div id="head_bar">
		</div>
		<div id="nav_container">
			<?include("nav.php") ?>
		</div>
		<div id="main">
			<div>
				Find more pics at: <a href="http://picasaweb.google.com/gspage" rel="external" class="link_with_box">http://picasaweb.google.com/gspage</a>
			</div>
			<div id="profile_div">
				<img id="profile_pic" src="images/a.jpg" alt="at AMD" />
			</div>
			<div id="slide">
				<!-- "previous page" action --><a class="prevPage browse left"></a>
				<!-- root element for scrollable -->
				<div class="scrollable">
					<!-- root element for the items -->
					<div class="items">
						<a title="苏州博物馆" href="http://4ztcta.blu.livefilestore.com/y1pbArwg0IgTVC7tkRYV0JpQ77YgBAaIwsK3mKIj_oW7WdaEIZwBCDM3WE885fgzJoDUbZXEl2j7pOujJA9T8v8enXZtq3Tdh8P/100_4555.JPG"><img src="images/thumbnails/1.jpg" alt="" /></a>
						<a title="Cheers" href="http://4ztcta.blu.livefilestore.com/y1poJOld3eE3TiaiSei4exTWUrRv2mMjjjOQnLDUATsHTJvCUq849GHpxgQcrF3T7bO86ptlC0u_OwDa6WgvOmG7ZNzKjgXv-wR/5536_121704572565_716307565_2334470_6120855_n.jpg" ><img class="photo" alt="" src="images/thumbnails/2.jpg" /></a>
						<a title="科技园之湖边" href="http://4ztcta.blu.livefilestore.com/y1pv-WUg-nfvmIoLb5oYzFoSaAtFxslmJjmUI29R3eKIyhDYjkcJ4WXqrp7nCG3EmnjPLfdgqXgIknl38yDdUtO-oQBjz_QasUW/100_3133-1.JPG" ><img src="images/thumbnails/3.jpg" alt="" /></a>
						<a title="Untitled" href="http://4ztcta.blu.livefilestore.com/y1pS8y04DpUuc196R9_ujiX9Y3hUIA0a3yxQOgp_Km2UGyDcfGdiEH7luTETnRlXogg6suurtGbgLwfKxnPbHn7Cx68pXmEKk69/100_4436-1.JPG" ><img src="images/thumbnails/4.jpg" alt="" /></a>
						<a title="力托千斤" href="http://4ztcta.blu.livefilestore.com/y1p-XKlgeVPGctz2s4JQv26FjrxI5ZOePyjocZvzW4hrry6APlmkvWd2KvYjXm4hVRvz25mtnKkm029TT_apW55RuPSM2dyejdw/IMG_1222.JPG" ><img src="images/thumbnails/5.jpg" alt="" /></a>
						<a title="金鸡湖边" href="http://4ztcta.blu.livefilestore.com/y1p-XKlgeVPGcsgeHRfrzOVCW_Sm08N0sKJMnVKp3oJ3hAZDyUVwyc2TQoSd0mklBWno_hif63viQK-9idpwi1Wiy_0eSR4ZaQ2/IMG_1297.JPG" ><img src="images/thumbnails/6.jpg" alt="" /></a>
						<a title="Untitled" href="http://4ztcta.blu.livefilestore.com/y1pNWApkGSXeFJqa4CAr50FLP4ygrTcgVyCWRqLeQO-LYDj4RKvQDFwD88nBjW-zBcvSovAnSFtIggzyHMOGeoIysCX0LrvLQH5/IMG_2215.JPG" ><img src="images/thumbnails/7.jpg" alt="" /></a>
						<a title="Untitled" href="http://4ztcta.blu.livefilestore.com/y1pIjQuwVhi0u2htO6TuemKH-Hlc0yhwdLGK0kOrDl99HIx8nisJk65G-tC7h4Le3eMJuD8XryK9rQiOAO_h4bvTHnMkiJYW6uT/IMG_2228-1.JPG" ><img src="images/thumbnails/8.jpg" alt="" /></a>
						<a title="清名桥" href="http://4ztcta.blu.livefilestore.com/y1pGEo3oiv0Trn9p-qD_pKEMOiYOyDXalRYjqLmrvfkSdkTa9GcpxIwTL8mNUEvPSIyQ1AZ8SWRBbJK9WS5UxolKMsyuiRt_0CP/IMG_2508.JPG" ><img src="images/thumbnails/9.jpg" alt="" /></a>
						<a title="超长的自行车" href="http://4ztcta.blu.livefilestore.com/y1pnV1NX9Ago2tC_trqM9vL2p4EAIc98OIcT0HdFL3q0O3RFZZ0qBoPH_mndpbYrIFXx0Yg_Fj5LQ5te_rY5xWLHw/IMG_2653.JPG" ><img src="images/thumbnails/13.jpg" alt="" /></a>
						<a title="浅水" href="http://4ztcta.blu.livefilestore.com/y1pv8quctlSqKXgMqJHGe5Xp8zL3r1HGcCKquuG9SrqA5MWNM4LBm6ZUA6cybRDCubsL5jLyu9jjvvZJitpwRYOktg_lg7o6Dwt/IMG_2612.JPG" ><img src="images/thumbnails/11.jpg" alt="" /></a>
						<a title="Untitled" href="http://4ztcta.blu.livefilestore.com/y1p81Vk3qyZYi2aVGv49U7brE2xNZjItgaOh68iksKNCLquys6SkC5Ww3_NAQn0_UAmcXQ8H__IXdfOvEe5aXSHfw/IMG_2623.JPG" ><img src="images/thumbnails/12.jpg" alt="" /></a>
						<a title="顺电" href="http://4ztcta.blu.livefilestore.com/y1pR2_e8pnynU585JANXUNSOkjC3-o_x2EuYdJgHzxb3eM1wwGffrTKo_x03a26fSDbqbTBB__H5NshqjtZc2hc4w/IMG_2655.JPG" ><img src="images/thumbnails/15.jpg" alt="" /></a>
						<a title="顺电" href="http://4ztcta.blu.livefilestore.com/y1pR2_e8pnynU52Ep9fnHKgCdM0vy7RxiU4UPCnipueA1uvAVm9ICZ-MUlwg32xXFqrtg6Sus-CwIB3_aKnoiW58Q/IMG_2664.JPG" ><img src="images/thumbnails/14.jpg" alt="" /></a>
						<a title="车" href="http://4ztcta.blu.livefilestore.com/y1p3lWN_MOACBO1JXXj_gOayuQ7C0Zjm3RvLYjTkTRrkxUc_ggFDleNJIbPi_w4FnSqdU-tkqvh7Dx0vqK76bl7JodWwSHUGZ31/IMG_2613.JPG" ><img src="images/thumbnails/16.jpg" alt="" /></a>
					</div>
				</div><!-- "next page" action --><a class="nextPage browse right"></a>
			</div>
			<div style="height: 150px;">
			</div>	
			<!-- one single tooltip element -->
			<div id="tooltip">
			</div>
			<!-- overlay element -->
			<div class="simple_overlay" id="gallery">
				<!-- "previous image" action --><a class="prev">prev</a>
				<!-- "next image" action --><a class="next">next</a>
				<!-- image information -->
				<div class="info">
				</div>
				<!-- load indicator (animated gif) --><img class="progress" src="images/loading.gif" alt="" />
			</div>
		</div>
		<div id="footer">
			<?include("footer.php") ?>
		</div>
	</body>
</html>
